<template>
    <!-- 排班信息管理 -->
    <div class="appMainWarp">
        <div class="WorkingSchedule">
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline"
                size="small"
                label-width="110px"
                ref="formData"
                :rules="rules"
            >
                <el-row>
                    <el-col :lg="12" :xl="8">
                        <el-form-item label="坐席人员：">
                            <el-input v-model="formData.seatName" placeholder="请输入要查询的坐席名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :xl="8">
                        <el-form-item label="时间区间：" prop="date">
                            <el-date-picker
                                v-model="formData.date"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :xl="8">
                        <el-form-item label="小组信息">
                            <el-input v-model="formData.seatGroup" placeholder="请输入要查询的小组信息"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :xl="8">
                        <el-form-item label="岗位">
                            <el-input v-model="formData.seatPost" placeholder="请输入要查询的小组信息"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-search"
                                @click="handleClickbtnFun"
                                class="searchBtn"
                            >查询</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="handleReset"
                                class="resetBtn"
                            >重置</el-button>
                            <el-button type="primary" size="small" @click="clickImport">坐席排班表导入</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-download"
                                @click="downloadFile"
                            >点击下载坐席排班表模板</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="text_center">
                <template>
                    <el-table
                        :data="tableData"
                        border
                        stripe
                        style="width:98%"
                        class="el-table heard-bg"
                    >
                        <el-table-column label="员工姓名" prop="seatName"></el-table-column>
                        <el-table-column label="小组" prop="seatGroup"></el-table-column>
                        <el-table-column label="岗位" prop="seatPost"></el-table-column>
                        <el-table-column label="时间" prop="classTime"></el-table-column>
                        <el-table-column label="班次" prop="typeClass"></el-table-column>
                        <el-table-column label="星期" prop="classWeek"></el-table-column>
                    </el-table>
                    <Pagination
                        :hanleChangeCurrentPage="hanleChangeCurrentPage"
                        :handleChangeSize="handleChangeSize"
                        :currentPage="currentPage"
                        :pageSize="pageSize"
                        :total="total"
                    />
                </template>
            </div>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">班次数据导入</div>
            <YsUpload ref="YsUpload" :actionUrl="actionUrl" @getInitData="getInitData"></YsUpload>
            <!-- <a @click="downloadFile" class="downloadClass">点击此处下载模板</a> -->

            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    id="importBut"
                    type="primary"
                    size="small"
                    @click="handleImport"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import YsUpload from '@/components/YsUpload/YsUpload.vue';

import request from '@/apis/request';
export default {
    name: 'WorkingSchedule',
    components: { Pagination, YsUpload },
    data() {
        return {
            formData: {
                date: '',//时间
                seatName: '',//姓名
                seatPost: '',//岗位
                seatGroup: '',//小组
            },
            tableTitle: '',
            tableData: [],
            Show: false,
            currentPage: 1,
            pageSize: 15,
            total: 0,
            files: '',
            actionUrl: '/iccsrv/sys/seatClass/import',
            rules: {
                date: [
                    { required: true, message: '请选择开始时间和结束时间!', trigger: 'blur' },
                ]
            },
        }
    },
    mounted() {
    },
    methods: {
        //点击 校验必填选项
        handleClickbtnFun() {
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.getInitData();
                }
            })
        },
        //查询
        //获取当天所有人的班次数据数据
        getInitData() {
            // console.log('获取当月月份数据', this.formData.month);
            let params = {};
            params = {
                startTime: this.formData.date[0],
                endTime: this.formData.date[1],
                seatName: this.formData.seatName,
                seatPost: this.formData.seatPost,
                seatGroup: this.formData.seatGroup,
                pageNum: 1,
                pageSize: 15,
            };
            this.$post.information.pageSeatClass(params).then((res) => {
                console.log('res111111__', res);
                if (res.data.success) {
                    this.tableData = res.data.content.records;
                    this.total = res.data.content.total;
                }
            });
        },
        // 点击导入
        clickImport() {
            this.Show = true;
        },
        // 导入点击确定按钮
        handleImport() {
            this.$refs.YsUpload.submitupload();
        },

        // 取消
        cancelClick() {
            this.$refs.YsUpload.clearFilesFun();
            this.Show = false;
        },
        // 下载按钮
        downloadFile() {
            // this.$post.information.seatClassImport().then((res) => {
            //     // console.log(res, '相应报文')
            //     const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
            //     const a = document.createElement('a');
            //     a.style.display = 'none';
            //     a.download = 'custLabelTemplate.xlsx';
            //     a.href = blobUrl;
            //     document.body.appendChild(a);
            //     a.click();
            //     document.body.removeChild(a);
            // });
            const url = '/iccsrv/sys/seatClass/seatExport';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                params: '20xx年xx月xx日-20xx年xx月xx日.xlsx',
            }).then((res) => {
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = '20xx年xx月xx日-20xx年xx月xx日.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            console.log('this.currentPage', val);
            this.currentPage = val;
            this.getInitData('2');
            this.tableData = [];
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            console.log('pageSize', val);
            this.pageSize = val;
            this.getInitData('2');
            this.tableData = [];
            console.log('this.pageSize', this.pageSize);
        },
        // 重置
        handleReset() {
            this.formData.month = '';
            this.tableData = [];
            this.formData.seatName = '';
            this.formData.seatGroup = '';
            this.formData.seatPost = '';
            this.formData.date = '';
        },
    },
}
</script>

<style  lang="scss">
.WorkingSchedule {
    padding: 20px;
    .demo-form-inline {
        .el-col {
            text-align: left;
        }
    }
}
</style>